<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">

    <!--模糊查询-->
    <el-input v-model="info.sname" placeholder="店铺名称"  style="display: inline-block;width: 200px;"></el-input>
    <el-input v-model="info.location" placeholder="店铺位置"  style="display: inline-block;width: 200px;"></el-input>
    <el-select v-model="info.sid" placeholder="店铺状态">
            <el-option>所有</el-option>
            <el-option v-for="(s,i) in stateArr" :label="s.name" :value="s.id"></el-option>
    </el-select>

    <el-button icon="el-icon-search" circle @click="searchData"></el-button>
    <!--店铺信息展示-->
    <el-table :data="storeArr" stripe  width="100%">
        <el-table-column prop="id" label="编号" width="180px">
        </el-table-column>
        <el-table-column prop="sname" label="店铺名称" width="180px">
        </el-table-column>
        <el-table-column prop="b.bname" label="店主" width="180px">
        </el-table-column>
        <el-table-column prop="location" label="定位" width="180px">
        </el-table-column>
        <el-table-column prop="b.date" label="日期" width="180px">
        </el-table-column>
        <el-table-column prop="sid" label="状态" width="180px">
            <template slot-scope="scope">
                <el-switch
                        v-model="scope.row.sid"
                        active-color="#409EFF"
                        :active-value="0"

                        inactive-color="#EAECF0"
                        :inactive-value="1"
                        @change="updateState(scope.row.id,scope.row.sid)">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="showStoreDialog(scope.row.id)">
                    详情
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--店铺详情页展示-->
    <el-dialog title="店铺详情" :visible.sync="storeDetailVisible">
        <el-form :model="storeDetail" status-icon ref="storeDetail"label-width="100px" class="demo-ruleForm">

            <!-- 左侧-->
            <el-form-item label="头像:" prop="bicon">
                <img :src="storeDetail.b.bicon" readonly="readonly" style="width: 100px;height: 100px;">
            </el-form-item>
            <el-form-item label="店铺名称:" prop="sname">
                <el-input type="text" readonly="readonly" v-model="storeDetail.sname" style="display: inline-block;width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="所在区域" prop="aname">
                <el-input type="text" readonly="readonly" v-model="storeDetail.area.aname" style="display: inline-block;width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="归属市场" prop="mname">
                <el-input type="text" readonly="readonly" v-model="storeDetail.market.mname" style="display: inline-block;width: 200px;" ></el-input>
            </el-form-item>
            <el-form-item label="定位" prop="location">
                <el-input type="text" readonly="readonly" v-model="storeDetail.location" style="display: inline-block;width: 200px;" ></el-input>
            </el-form-item>
            <el-form-item label="营业执照:" prop="license">
                <img :src="storeDetail.b.license" readonly="readonly" style="width: 100px; height: 100px">
            </el-form-item>
            <!--右侧-->
            <el-form-item label="店主姓名:" prop="bname">
                <el-input type="text" readonly="readonly" v-model="storeDetail.b.bname"style="display: inline-block;width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" prop="telephone">
                <el-input type="text" readonly="readonly" v-model="storeDetail.b.telephone" style="display: inline-block;width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="入驻时间:" prop="enterdate">
                <el-input type="text" readonly="readonly" v-model="storeDetail.b.enterdate" style="display: inline-block;width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="店铺状态:" prop="name">
                <el-input type="text" readonly="readonly" v-model="storeDetail.s.name" style="display: inline-block;width: 200px;"></el-input>
            </el-form-item>

        </el-form>
    </el-dialog>


    <el-dialog
            title="原因"
            :visible.sync="causeVisible"
            width="30%"
            >
        <el-form :model="addCause" status-icon :rules="rules" ref="addCause" label-width="100px" class="demo-ruleForm" style="margin-right: 50px">
        <el-form-item label="原因" prop="other">
            <el-input
                    type="textarea"
                    v-model="addCause.other"
                    :rows="2"
                    placeholder="请输入内容">

            </el-input>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="causeVisible = false">取 消</el-button>
    <el-button type="primary" @click="AddOther()">确 定</el-button>
  </span>
    </el-dialog>



    <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="totalCount">
    </el-pagination>

</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            info:{},
            storeArr:[],
            totalCount:0,
            storeDetail:{
                b:{},
                area:{},
                market:{},
                s:{}
            },
            storeDetailVisible:false,
            state:{},
            stateArr:[],
            causeVisible:false,
            addCause:{},
            rules:{
                other: [
                    { required: true, message:'必须填入原因', trigger: 'blur' },
                    { pattern: /^[\u4e00-\u9fa5]+$/, message: '输入的原因有误',trigger: 'blur' }
                ]
            }
        },
        methods: {
            AddOther:function(){
                app.$refs["addCause"].validate((valid) => {
                    if (valid) {
                        app.addCause.sid = app.state.id;
                        $.post("/cai/store/update/", app.state, function (stateBackData) {
                            $.post("/cai/store/addOther", app.addCause, function (backData) {
                                if (backData.code == 1) {
                                    app.$notify({
                                        title: '成功',
                                        message: '这是一条成功的提示消息',
                                        type: 'success'
                                    });
                                    app.causeVisible = false;
                                    app.$refs["addCause"].resetFields();
                                    getInfo(1, 10);
                                } else {
                                    app.$notify.error({
                                        title: '温馨提示',
                                        message: backData.msg
                                    });
                                }
                            });
                        });
                    }
                });
            },
            showStoreDialog:function(a){
                $.get("/cai/store/getDetail/"+a,function (backData) {
                    app.storeDetail = backData.data;
                });
                app.storeDetailVisible = true;
            },
            updateState (c,d) {
               app.causeVisible = true;
               app.state.id = c;
               app.state.sid = d;
               getInfo(1,10);

            },
            handleCurrentChange: function (val) {
                getInfo(val, 10);
            },
            searchData: function () {
                getInfo(1, 10);
            }
        }

    });


    function getInfo(a,f){
        app.info.pageNo = a;
        app.info.pageCount = f;
        $.post("/cai/store/list",app.info,function (backData) {

                app.storeArr = backData.data.pageData;
                app.totalCount = backData.data.totalCount;

        });
    }

      getInfo(1,10);
      $.get("/cai/store/listState",function (backData) {
          app.stateArr = backData.data;
      });
</script>
</body>
</html>